<template>
    <div class="language-group">
        <div class="title">常用语言组</div>
        <el-table v-loading="loading" :data="LanguageGroupList">
            <el-table-column label="语言组编号" align="center" prop="languageGroupId"/>
            <el-table-column label="语言详情" align="center" prop="languageZhTitles"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除
                    </el-button>
                    <el-button link type="warning" icon="Link" @click="handleUse(scope.row)">使用
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加或修改语言编组对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="LanguageGroupRef" :model="form" :rules="rules" label-width="80px">
                <el-select tag-type="danger" clearable class="f-full" multiple
                           filterable
                           v-model="form.languageCodes"
                           placeholder="请选择翻译语言">
                    <el-option v-for="language in languageList"
                               :key="language.value"
                               :label="language.label"
                               :value="language.value"/>
                </el-select>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <pagination
                v-show="total>0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
        />
    </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {
    addLanguageGroup,
    delLanguageGroup,
    getLanguageGroup,
    listLanguageGroupByMine,
    updateLanguageGroup
} from "@/api/business/LanguageGroup";

const emits = defineEmits(['useLanguageGroup'])
const props = defineProps({
    languageList: {
        type: Array,
        default: () => []
    }
})
const open = ref(false);
const LanguageGroupList = ref([]);
const {proxy} = getCurrentInstance();
const total = ref(0);
const title = ref("");
const ids = ref([]);
const loading = ref(false);
const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        languageZhTitles: null,
        languageEnTitles: null,
        languageCodes: null,
        userId: null,
    },
    rules: {}
});

const {queryParams, form, rules} = toRefs(data);

/** 查询语言编组列表 */
function getList() {
    loading.value = true;
    listLanguageGroupByMine(queryParams.value).then(response => {
        LanguageGroupList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

/**
 * 使用
 */
function handleUse(row) {
    emits('useLanguageGroup', row.languageCodes.split(','))
}

/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    const _languageGroupId = row.languageGroupId || ids.value
    getLanguageGroup(_languageGroupId).then(response => {
        response.data.languageCodes = response.data.languageCodes.split(',')
        form.value = response.data;
        open.value = true;
        title.value = "修改语言编组";
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    const _languageGroupIds = row.languageGroupId || ids.value;
    proxy.$modal.confirm('是否确认删除语言编组编号为"' + _languageGroupIds + '"的数据项？').then(function () {
        return delLanguageGroup(_languageGroupIds);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {
    });
}

// 表单重置
function reset() {
    form.value = {
        languageGroupId: null,
        languageZhTitles: null,
        languageEnTitles: null,
        languageCodes: null,
        userId: null,
        createTime: null,
        createBy: null
    };
    proxy.resetForm("LanguageGroupRef");
}

// 取消按钮
function cancel() {
    open.value = false;
    reset();
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["LanguageGroupRef"].validate(valid => {
        if (valid) {
            let data = JSON.parse(JSON.stringify(form.value))
            let languageZhTitles = []
            let languageEnTitles = []
            data.languageCodes.forEach(item => {
                languageZhTitles.push(props.languageList.find(x => x.value === item).label)
                languageEnTitles.push(props.languageList.find(x => x.value === item).en)
            })
            data.languageCodes = data.languageCodes.join(',');
            data.languageZhTitles = languageZhTitles.join(',');
            data.languageEnTitles = languageEnTitles.join(',');
            if (form.value.languageGroupId != null) {
                updateLanguageGroup(data).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addLanguageGroup(data).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

defineExpose({
    getList
})
getList();
</script>

<style scoped lang="scss">
:deep(.pagination-container) {
  display: flex;
  align-items: center;
  justify-content: center;

  .el-pagination {
    position: static;
  }
}
</style>
